import React,{Component} from 'react';
import { Form, Row, Col, DatePicker, Button, Table, Select, message} from 'antd';
import axios from 'axios';

const Option = Select.Option;
const FormItem = Form.Item;

class RecordByDateForm extends Component{
    constructor(props){
        super(props);

        this.state = {
            columns:[
                {
                    title: '流水号',
                    dataIndex: 'serialNumber',
                    key: 'serialNumber'
                },
                {
                    title: '出入库',
                    dataIndex: 'opeType',
                    key: 'opeType',
                    render:(text, record)=>{
                        if(record.opeType === 1){
                            return <span>入库</span>
                        } else if(record.opeType === 2) {
                            return <span>出库</span>
                        } else {
                            return <span>未知</span>
                        }
                    }
                },
                {
                    title: '日期',
                    dataIndex: 'createTime',
                    key: 'createTime'
                },
                {
                    title: '操作',
                    dataIndex: 'operate',
                    key: 'operate',
                    render:(text, record) => (
                        <span>
                            <a onClick={()=>this.showDetail(record)}>查看详情</a>
                        </span>
                    )
                },
            ],
            data:[]
        }
    }

    getByDate = (e) => {
        if(e) {
            e.preventDefault();
        }
        this.props.form.validateFields((errors, values)=>{
            if(!errors){
                axios.get(`${global.constants.apiPath}/record/getRecordByDate.htm`,{
                    params:{
                        createTime:values.createTime.format("YYYY-MM-DD"),
                        opeType:values.opeType
                    }
                }).then((response) => {
                    if(response.data.code === "0"){
                        this.setState({
                            data:response.data.content
                        })
                    } else {
                        message.error(response.data.desc);
                    }
                });
            } else {
                message.error('系统前端错误')
            }
        });
    }

    render() {

        const {
            getFieldDecorator
        } = this.props.form;

        return(
            <div>
                <Form layout="inline" onSubmit={this.getByDate} style={{ margin: '20px' }}>
                    <Row>
                        <Col span={4}>
                            <FormItem label="日期">
                                {getFieldDecorator('createTime')(
                                    <DatePicker placeholder="日期"/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={4}>
                            出入库：
                            {getFieldDecorator('opeType')(
                                <Select allowClear={true} style={{ width: 120 }}>
                                    <Option value="1">入库</Option>
                                    <Option value="2">出库</Option>
                                </Select>
                            )}
                        </Col>
                        <Col span={2}></Col>
                        <Col span={14}>
                            <Button type="primary" htmlType="submit">查询</Button>
                        </Col>
                    </Row>
                </Form>
                <Row>
                    <Table rowKey={record => record.serialNumber} columns={this.state.columns} dataSource={this.state.data} ></Table>
                </Row>

            </div>

        );
    }
}
const RecordByDate = Form.create()(RecordByDateForm);
export default RecordByDate;